<script setup lang="ts">

import ThreeButton from "@/Components/ThreeButton.vue";
import ThreeDiv from "@/Components/ThreeDiv.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "@/Components/SongBottom.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import SongList from "@/Components/SongList.vue";

// const newArray:Ref<any[]> = ref([])
// let songList = ref([])
// const userId = localStorage.getItem("userId")??''
// const emit = defineEmits(['page-to-send', 'display-song', 'display-song-list'])
//
// onMounted(()=>{
//   getLoveSongList()
//   getLoveSongList2(parseInt(userId))
// })
//
// async function getLoveSongList(){
//   const response = await axios.post("http://localhost:8080/HistoryController/findAllHistoryByUserid", null, {
//     params: {
//       userid: parseInt(userId)
//     }
//   })
//   songList.value = response.data
//   newArray.value = songList.value.map(item => item.song);
//   console.log("response data is "+response.data)
//   console.log("songList.value is "+JSON.stringify(songList.value))
// }
//
// function playSongFunction(song: any, songList: any, index) {
//   console.log("playSongFunction 执行了")
//   emit("display-song", song)
//   emit("display-song-list", songList)
//   store.current = index
// }
//
// /*底下的功能是为了点击小熊转换喜欢或不喜欢并在数据库插数据服务*/
// const loveSongList = ref([])
//
// async function getLoveSongList2(userId: number) {
//   console.log(userId + "userId")
//   try {
//     const response = await axios.post('http://localhost:8080/LoveController/findAllLoveByUserid', null, {
//       params: {
//         userid: userId
//       }
//     })
//     if (response.data != null) {
//       loveSongList.value = response.data
//       console.log("查询用户喜欢的歌曲成功")
//     } else {
//       console.log("查询用户喜欢的歌曲失败，在else处报错")
//     }
//   } catch (e) {
//     console.log(e)
//     console.log("查询用户喜欢的歌曲失败，在catch处报错")
//   }
//
// }
//
// const isLiked = (songId: number) => {
//   return loveSongList.value.some((item) => item.songid === songId);
// }
//
// async function changeToLiked(songId: number, userId: number) {
//   try {
//     const response = await axios.post('http://localhost:8080/LoveController/addLoveSong', null, {
//       params: {
//         songid: songId,
//         userid: userId
//       }
//     })
//     if (response.data != null) {
//       loveSongList.value = response.data
//       console.log("添加到喜欢的歌曲成功")
//     } else {
//       console.log("添加到喜欢的歌曲失败，在else处报错")
//     }
//   } catch (e) {
//     console.log(e)
//     console.log("添加到喜欢的歌曲失败，在catch处报错")
//   }
//   await getLoveSongList2(userId)
//   await getLoveSongList()
//
// }
//
// async function changeToDisliked(songId: number, userId: number) {
//   try {
//     const response = await axios.post('http://localhost:8080/LoveController/deleteLoveSongBySongid', null, {
//       params: {
//         songid: songId,
//         userid: userId
//       }
//     })
//     if (response.data != null) {
//       loveSongList.value = response.data
//       console.log("删除喜欢的歌曲成功")
//     } else {
//       console.log("删除喜欢的歌曲失败，在else处报错")
//     }
//   } catch (e) {
//     console.log(e)
//     console.log("删除喜欢的歌曲失败，在catch处报错")
//   }
//   await getLoveSongList2(userId)
//   await getLoveSongList()
//
// }


const pageName = "HistoryPage"



</script>

<template>
  <div class="fixed   w-200 h-45  pic z--1 top-20 left-160 opacity-23"></div>
  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search ></undo-redo-search>
      <div class="h-50 flex flex-col gap-5 mt-17 ml-5">
        <div class="flex items-center">
          <img class=" w-75 h-auto" src="../img/t-最近播放.png"/>
          <div class="text-4xl"></div>
        </div>
        <three-div class="mt--3"></three-div>
        <three-button></three-button>

        <div class="grow pb-12">
          <song-list class="px-5 ml-2" :pageName="pageName" ></song-list>
        </div>


      </div>


    </div>
    <right-user-photo></right-user-photo>
  </div>


</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
.pic {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/child-six.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>